<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <style media="screen">
    * {margin:0; padding:0; list-style:none}

    html, body {height:100%;}

    .sms {height:100%; overflow:hidden;}

    #sms_list {width:100%; transform: translateY(0px);}
    #sms_list li {width:100%; position:relative; height:30px; line-height:30px; border-bottom:1px solid #333; transition:0.6s all ease; overflow:hidden;}
    #sms_list li a.btn-del {position:absolute; right:0; top:0; height:100%; width:0px; text-align:center; line-height:30px; background:#F00; color:white; text-decoration:none;overflow:hidden;}
    #sms_list li a.btn-del span {width:100%; min-width:40px; display:block;}
    </style>
    <script src="js/hammer.js" charset="utf-8"></script>
    <script>
    window.onload=function (){
      const sms=[
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
      ];
      let oUl=document.getElementById('sms_list');
      let aBtnDel=document.getElementsByClassName('btn-del');

      sms.forEach(txt=>{
        let oLi=document.createElement('li');
        oLi.innerHTML=`<span>${txt}</span><a href="javascript:;" class="btn-del"><span>删除</span></a>`;

        oUl.appendChild(oLi);

        //
        let hammer=new Hammer(oLi);

        let oBtnDel=oLi.getElementsByTagName('a')[0];
        let delw=0,start_delw;

        let start_x,start_y;
        let dir='';
        hammer.on('panstart', function (ev){
          start_x=ev.center.x;
          start_y=ev.center.y;

          dir='';

          start_delw=delw;
        });
        hammer.on('panmove', function (ev){
          if(dir==''){
            if(Math.abs(ev.center.x-start_x)>=5){
              dir='x';
            }else if(Math.abs(ev.center.y-start_y)>=5){
              dir='y';
            }
          }else{
            if(dir=='x'){
              //删除按钮
              let w=start_delw+start_x-ev.center.x;

              if(w<80){
                oBtnDel.style.width=w+'px';
              }else{
                oBtnDel.style.width=80+(w-80)/6+'px';
              }

              delw=w;
            }else{
              //滚动列表
              // TODO: 
            }
          }
        });
        hammer.on('panend', function (){
          //console.log('end');

          oBtnDel.style.transition='0.3s all ease';

          if(delw>60){
            delw=80;
            oBtnDel.style.width=80+'px';
          }else{
            delw=0;
            oBtnDel.style.width=0+'px';
          }


          function fnEnd(){
            oBtnDel.style.transition='none';
            oBtnDel.removeEventListener('transitionend', fnEnd, false);
          }
          oBtnDel.addEventListener('transitionend', fnEnd, false);
        });
        /*hammer.on('swipeleft', function (){
          Array.from(aBtnDel).forEach(btn=>{
            btn.style.width='0px';
          });

          oBtnDel.style.width='80px';
        });
        hammer.on('swiperight', function (){
          oBtnDel.style.width='0px';
        });*/

        oBtnDel.onclick=function (){
          oBtnDel.style.width='0px';

          oBtnDel.addEventListener('transitionend', function (ev){
            oLi.style.height='0px';
            oLi.style.borderBottom='0px solid #333';

            ev.cancelBubble=true;

            oLi.addEventListener('transitionend', function (){
              oUl.removeChild(oLi);
            });
          }, false);
        };
      });
    };
    </script>
  </head>
  <body>
    <div class="sms">
      <ul id="sms_list"></ul>
    </div>
  </body>
</html>
